<?xml version="1.0" encoding="utf-8" ?>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<!-- <html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:ui="http://java.sun.com/jsf/facelets"
	  xmlns:h="http://java.sun.com/jsf/html"
	  xmlns:f="http://java.sun.com/jsf/core"
      xmlns:s="http://jboss.com/products/seam/taglib"
      xmlns:mycms="http://mycms.com/jsf/facelets"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions"> -->

<!-- <ui:composition template="#{mycms.profile.templateName}">  -->


<ui:composition template="../templates/composition/pageTemplate.xhtml">

	<ui:param name="page_title" value="Photography website" />
	<!-- <ui:param name="page_title" value="Photography website" /> -->

	<ui:define name="content">
	
		<style type="text/css">
			body {
				margin: 0 auto;
				padding: 0;
				width: 570px;
				font: 75%/120% Arial, Helvetica, sans-serif;
			}
			a:focus {
				outline: none;
			}
			#panel {
				background: #754c24;
				height: 200px;
				display: none;
			}
			.slide {
				margin: 0;
				padding: 0;
				border-top: solid 4px #422410;
				background: url(../images/jquery/btn-slide.gif) no-repeat center top;
			}
			.btn-slide {
				background: url(../images/jquery/white-arrow.gif) no-repeat right -50px;
				text-align: center;
				width: 144px;
				height: 31px;
				padding: 10px 10px 0 0;
				margin: 0 auto;
				display: block;
				font: bold 120%/100% Arial, Helvetica, sans-serif;
				color: #fff;
				text-decoration: none;
			}
			.active {
				background-position: right 12px;
			}
			
			body {
				margin: 20px auto;
				padding: 0;
				width: 580px;
				font: 75%/120% Arial, Helvetica, sans-serif;
			}
			h2 {
				font: bold 190%/100% Arial, Helvetica, sans-serif;
				margin: 0 0 .2em;
			}
			h2 em {
				font: normal 80%/100% Arial, Helvetica, sans-serif;
				color: #999999;
			}
			#largeImg {
				border: solid 1px #ccc;
				width: 550px;
				height: 400px;
				padding: 5px;
			}
			.thumbs img {
				border: solid 1px #ccc;
				width: 100px;
				height: 100px;
				padding: 4px;
			}
			.thumbs img:hover {
				border-color: #FF9900;
			}
		</style>

		<!--<h:messages globalOnly="true"/>-->

		<!-- Begin of "mainBody" -->
		<div class="mainContentArea">

			<table width="100%" height="100%" border="0" cellpadding="0"
				cellspacing="0">
				<tr>
					<td height="1" background="../images/photography_46/c_top.gif"
						class="bgx"><img src="../images/photography_46/spacer.gif"
						width="1" height="2" /></td>
				</tr>
				<tr>
					<td>	
						<div id="panel">
							<!-- you can put content here -->
						</div>
						
						<p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>
					</td>
				</tr>
<!-- 				<tr>
					<td>
						<h2>Illustrations</h2>

						<p><img id="largeImg" src="../images/jquery/img1-lg.jpg" alt="Large image" /></p>
						
						<p class="thumbs">
							<a href="../images/jquery/img1-lg.jpg" title="Image 1"><img src="../images/jquery/img1-thumb.jpg" /></a>
							<a href="../images/jquery/img2-lg.jpg" title="Image 2"><img src="../images/jquery/img2-thumb.jpg" /></a>
							<a href="../images/jquery/img3-lg.jpg" title="Image 3"><img src="../images/jquery/img3-thumb.jpg" /></a>
							<a href="../images/jquery/img4-lg.jpg" title="Image 4"><img src="../images/jquery/img4-thumb.jpg" /></a>
							<a href="../images/jquery/img5-lg.jpg" title="Image 5"><img src="../images/jquery/img5-thumb.jpg" /></a>
							<a href="../images/jquery/img6-lg.jpg" title="Image 6"><img src="../images/jquery/img6-thumb.jpg" /></a>
						</p>
					</td>
				</tr> -->
				<tr>
					<td height="1" valign="top" class="welcome">Welcome to
						Photography website!</td>
				</tr>
				<tr>
					<td valign="top" class="base_txt"><p>
							<script type="text/javascript">
							<!--
								google_ad_client = "pub-0500162490295296";
								google_ad_width = 468;
								google_ad_height = 60;
								google_ad_format = "468x60_as";
								google_ad_type = "text";
								//2006-11-21: Web templates - LAYOUTS
								google_ad_channel = "0286771451";
								google_color_border = "FFFFFF";
								google_color_bg = "FFFFFF";
								google_color_link = "1C61B5";
								google_color_text = "000000";
								google_color_url = "B3B3B3";
							//-->
							</script>
							<script type="text/javascript" 
								src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
								
							</script>
						</p>
						<p>Photography is the process of making pictures by means of
							the action of light. Light patterns reflected or emitted from
							objects are recorded onto a sensitive medium or storage chip
							through a timed exposure. The process is done through mechanical,
							chemical or digital devices known as cameras.</p>
						<p>
							Lens and mounting of a large-format cameraWikibooks has more
							about this subject: <br /> PhotographyThe word comes from the
							Greek words <!-- &phi;&omega;&sigmaf; --> phos (&quot;light&quot;), and
							<!-- &gamma;&rho;&alpha;&phi;&iota;&sigmaf; --> graphis
							(&quot;stylus&quot;, &quot;paintbrush&quot;) or
							<!-- &gamma;&rho;&alpha;&phi;&eta; --> graph<!-- &ecirc; -->, together meaning
							&quot;drawing with light&quot; or &quot;representation by means
							of lines&quot; or &quot;drawing.&quot; Traditionally the product
							of photography has been called a photograph. The term photo is an
							abbreviation; many people also call them pictures. In digital
							photography, the term image has begun to replace photograph.
						</p>
						<div style="border: #1C61B5 solid 1px; padding: 4px 6px 2px 6px">
							Этот бесплатный шаблон был закачан с <a
								href="http://ru.anvisionwebtemplates.com">AnVisionWebTemplates.com</a>.<br />
							Посетите нас по адресу <a
								href="http://ru.anvisionwebtemplates.com">ru.anvisionwebtemplates.com</a>
							для того, чтобы увидеть полную коллекцию наших шаблонов.
						</div> <br />
						<div style="border: #1C61B5 solid 1px; padding: 4px 6px 4px 6px">
							Submit your photography website to <a
								href="http://photographerfinders.net/" target="_blank">Photographers
								directory</a> - it's free!
						</div></td>
				</tr>
			</table>

		</div>
		<!-- End of "mainBody" -->
 
<!--  	
		<button>Start Animation</button>
		<br /><br />
		<div style="background:#98bf21;height:100px;width:100px;position:relative" /> 
-->
		
<!-- 		
		<div id="panel">
			you can put content here
		</div>
		
		<p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>
-->	

						<h2>Illustrations</h2>

						<p><img id="largeImg" src="../images/jquery/img1-lg.jpg" alt="Large image" /></p>
						
						<p class="thumbs">
							<!-- <a href="../images/jquery/img1-lg.jpg" title="Image 1"><img src="../images/jquery/img1-thumb.jpg" /></a> -->
							<a href="../images/jquery/img2-lg.jpg" title="Image 2"><img src="../images/jquery/img2-thumb.jpg" /></a>
							<a href="../images/jquery/img3-lg.jpg" title="Image 3"><img src="../images/jquery/img3-thumb.jpg" /></a>
							<a href="../images/jquery/img4-lg.jpg" title="Image 4"><img src="../images/jquery/img4-thumb.jpg" /></a>
							<a href="../images/jquery/img5-lg.jpg" title="Image 5"><img src="../images/jquery/img5-thumb.jpg" /></a>
							<a href="../images/jquery/img6-lg.jpg" title="Image 6"><img src="../images/jquery/img6-thumb.jpg" /></a>
						</p>
		
		<script type="text/javascript"> 
			$(document).ready(function(){
			  $("button").click(function(){
			    $("div").animate({height:300},"slow");
			    $("div").animate({width:300},"slow");
			    $("div").animate({height:100},"slow");
			    $("div").animate({width:100},"slow");
			  });
			});
		</script>
		
		<script type="text/javascript">
			$(document).ready(function(){	
				$(".btn-slide").click(function(){
					$("#panel").slideToggle("slow");
					$(this).toggleClass("active"); return false;
				}); 
			});
		</script>
		
		<script type="text/javascript">
			$(document).ready(function(){
				
 				$(".thumbs a").click(function() {

					var largePath = $(this).attr("href");
					var largeAlt = $(this).attr("title");
					
					$("#largeImg").attr({ src: largePath, alt: largeAlt });
					
					$("h2 em").html(" (" + largeAlt + ")"); return false;
				});
						
 				$("h2").append('<em></em>');
				
			});
		</script>

	</ui:define>
</ui:composition>

</html>